<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">

          <el-form-item label="请选择商品类别:">
            <el-select v-model="findProductItemParam.ptid" placeholder="商品类别" clearable @change="loadProductItem()">
              <el-option v-for="item in productTypeList" :key="item.ptid" :label="item.ptname"
                :value="item.ptid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择商品品牌:">
            <el-select v-model="findProductItemParam.pbid" placeholder="商品品牌" clearable @change="loadProductItem()">
              <el-option v-for="item in productBrandList" :key="item.pbid" :label="item.pbname"
                :value="item.pbid"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="showAddProductItemWindow">新增商品总览</el-button>
            <el-button type="primary" @click="banProductItem">禁用选中</el-button>
            <el-button type="primary" @click="unlockProductItem">解禁选中</el-button>
            <el-button type="primary" @click="deleteProductItem">删除选中</el-button>

            <el-button type="info" @click="showProductTypeWindow">商品种类</el-button>
            <el-button type="info" @click="showProductBrandWindow">商品品牌</el-button>
            <el-button type="info" @click="showProductActiveWindow">商品活动</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="24">

        <el-table :data="productItemList" style="width: 100%" @selection-change="handleProductItemChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="pname" label="商品名称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="ptname" label="商品种类名称" width="180" align="center" label-align="center">
          </el-table-column> -->
          <el-table-column prop="pbname" label="商品品牌名" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="payNum" label="累计销量" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="状态" width="100" align="center" label-align="center">
            <template slot-scope="scope">{{ getStateText(scope.row.proState)}}</template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="操作" width="230" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.proState==0" @click="banProductItemById(scope.row)">禁用</el-button>
              <el-button type="text" v-if="scope.row.proState==1"
                @click="unlockProductItemByid(scope.row)">解禁</el-button>
              <el-button type="text" @click="showUpdateProductItemWindow(scope.row)">编辑</el-button>
              <el-button type="text" @click="deleteProductItemById(scope.row)">删除</el-button>
              <el-button type="text" @click="showProductInfoWindow(scope.row)">商品详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--新增商品总览窗口-->
    <el-dialog title="新增商品总览" :visible.sync="addProductItemWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入商品总览名称:">
              <el-input v-model="addProductItemParam.pname" placeholder="请输入商品总览名称"> </el-input>
            </el-form-item>
            <el-form-item label="请选择商品类别:">
              <el-select v-model="addProductItemParam.ptid" placeholder="商品类别" clearable>
                <el-option v-for="item in productTypeList" :key="item.ptid" :label="item.ptname"
                  :value="item.ptid"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择商品品牌:">
              <el-select v-model="addProductItemParam.pbid" placeholder="商品品牌" clearable>
                <el-option v-for="item in productBrandList" :key="item.pbid" :label="item.pbname"
                  :value="item.pbid"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductItemWindow = false">取 消</el-button>
        <el-button @click="insertProductItem">新 增</el-button>
      </div>
    </el-dialog>

    <!--修改商品总览窗口-->
    <el-dialog title="新增商品总览" :visible.sync="updateProductItemWindow">
      <el-form :model="updateProductItemParam" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新商品总览名称:">
              <el-input v-model="updateProductItemParam.pname" placeholder="请输入商品总览名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductItemWindow = false">取 消</el-button>
        <el-button @click="updateProductItem">修 改</el-button>
      </div>
    </el-dialog>

    <!--商品种类窗口-->
    <el-dialog title="商品种类" :visible.sync="productTypeWindow">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" @click="showAddProductTypeWindow">新增商品种类</el-button>
              <el-button type="primary" @click="banProductType">禁用选中</el-button>
              <el-button type="primary" @click="unlockProductType">解禁选中</el-button>
              <el-button type="primary" @click="deleteProductType">删除选中</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="productTypeList" style="width: 100%" @selection-change="handleProductTypeChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="ptname" label="商品种类名称" width="180" align="center"></el-table-column>
        <el-table-column label="状态" width="100" align="center" label-align="center">
          <template slot-scope="scope">{{ getStateText(scope.row.ptstate)}}</template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.ptstate==0" @click="banProductTypeById(scope.row)">禁用</el-button>
            <el-button type="text" v-if="scope.row.ptstate==1" @click="unlockProductTypeByid(scope.row)">解禁</el-button>
            <el-button type="text" @click="showUpdateProductTypeWindow(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteProductTypeById(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--新增商品种类窗口-->
    <el-dialog title="新增商品种类" :visible.sync="addProductTypeWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入商品种类名称:">
              <el-input v-model="pTName" placeholder="请输入商品种类名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductTypeWindow = false">取 消</el-button>
        <el-button @click="insertProductType">新 增</el-button>
      </div>
    </el-dialog>

    <!--修改商品种类窗口-->
    <el-dialog title="新增商品种类" :visible.sync="updateProductTypeWindow">
      <el-form :model="updateProductTypeForm" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新商品种类名称:">
              <el-input v-model="updateProductTypeForm.pTName" placeholder="请输入商品种类名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductTypeWindow = false">取 消</el-button>
        <el-button @click="updateProductType">修 改</el-button>
      </div>
    </el-dialog>

    <!--商品品牌窗口-->
    <el-dialog title="商品品牌" :visible.sync="productBrandWindow">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" @click="showAddProductBrandWindow">新增商品品牌</el-button>
              <el-button type="primary" @click="banProductBrand">禁用选中</el-button>
              <el-button type="primary" @click="unlockProductBrand">解禁选中</el-button>
              <el-button type="primary" @click="deleteProductBrand">删除选中</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="productBrandList" style="width: 100%" @selection-change="handleProductBrandChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="pbname" label="商品品牌名称" width="180" align="center"></el-table-column>
        <el-table-column label="状态" width="100" align="center" label-align="center">
          <template slot-scope="scope">{{ getStateText(scope.row.pbstate)}}</template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.pbstate==0" @click="banProductBrandById(scope.row)">禁用</el-button>
            <el-button type="text" v-if="scope.row.pbstate==1" @click="unlockProductBrandByid(scope.row)">解禁</el-button>
            <el-button type="text" @click="showUpdateProductBrandWindow(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteProductBrandById(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--新增商品品牌窗口-->
    <el-dialog title="新增商品品牌" :visible.sync="addProductBrandWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入商品品牌名称:">
              <el-input v-model="pBName" placeholder="请输入商品品牌名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductBrandWindow = false">取 消</el-button>
        <el-button @click="insertProductBrand">新 增</el-button>
      </div>
    </el-dialog>

    <!--修改商品品牌窗口-->
    <el-dialog title="新增商品品牌" :visible.sync="updateProductBrandWindow">
      <el-form :model="updateProductBrandForm" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新商品品牌名称:">
              <el-input v-model="updateProductBrandForm.pBName" placeholder="请输入商品品牌名称"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductBrandWindow = false">取 消</el-button>
        <el-button @click="updateProductBrand">修 改</el-button>
      </div>
    </el-dialog>

    <!--商品详情窗口-->
    <el-dialog title="商品详情" :visible.sync="productInfoWindow" width="80%">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" @click="showAddProductInfoWindow">新增商品详情</el-button>
              <el-button type="primary" @click="banProductInfo">禁用选中</el-button>
              <el-button type="primary" @click="unlockProductInfo">解禁选中</el-button>
              <el-button type="primary" @click="deleteProductInfo">删除选中</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="productInfoList" style="width: 100%" @selection-change="handleProductInfoChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="商品图片" width="110" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.ppicture" style="width: 80px; height: 80px; object-fit: cover;" alt="商品图片" />
          </template>
        </el-table-column>
        <el-table-column prop="pinfoName" label="详情名称" width="100" align="center"></el-table-column>
        <el-table-column prop="pname" label="商品名称" width="100" align="center"></el-table-column>
        <el-table-column prop="ptname" label="种类名称" width="100" align="center"></el-table-column>
        <el-table-column prop="pbname" label="商品品牌名" width="100" align="center"></el-table-column>
        <el-table-column prop="pinfoPrice" label="商品价格" width="100" align="center"></el-table-column>
        <el-table-column prop="restNum" label="库存" width="100" align="center"></el-table-column>
        <el-table-column prop="freezeNum" label="冻结量" width="100" align="center"></el-table-column>
        <el-table-column prop="pdetails" label="商品描述" width="100" align="center"></el-table-column>
        <el-table-column prop="pinfoSum" label="累计销量" width="100" align="center"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" align="center"></el-table-column>
        <el-table-column label="商品状态" width="100" align="center" label-align="center">
          <template slot-scope="scope">{{ getStateText(scope.row.pinfoState)}}</template>
        </el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.pinfoState==0" @click="banProductInfoById(scope.row)">禁用</el-button>
            <el-button type="text" v-if="scope.row.pinfoState==1"
              @click="unlockProductInfoByid(scope.row)">解禁</el-button>
            <el-button type="text" @click="showUpdateProductInfoWindow(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteProductInfoById(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--新增商品详情窗口-->
    <el-dialog title="新增商品详情" :visible.sync="addProductInfoWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请输入商品详情名称:">
              <el-input v-model="addProductInfoParam.pInfoName" placeholder="请输入商品详情名称"> </el-input>
            </el-form-item>
            <el-form-item label="请输入商品价格:">
              <el-input-number :step="0.01" v-model="addProductInfoParam.pInfoPrice" placeholder="请输入商品价格"
                :controls="false"> </el-input-number>
            </el-form-item>
            <el-form-item label="请输入商品库存:">
              <el-input-number :step="1" v-model="addProductInfoParam.restNum" placeholder="请输入商品库存" :controls="false">
              </el-input-number>
            </el-form-item>
            <el-form-item label="请输入商品描述:">
              <el-input v-model="addProductInfoParam.pDetails" placeholder="请输入商品描述"> </el-input>
            </el-form-item>

            <el-upload :headers="headers" name="pPicture" :data="addProductInfoParam" class="upload-demo" ref="upload"
              action="http://192.168.60.79:80/product/productInfo/insertProductInfo.api" :auto-upload="false"
              :on-success="addProductInfoSuccess" :on-error="addProductInfoError">
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button style="margin-left: 10px;" size="small" type="success"
                @click="insertProductInfo">新增商品详情</el-button>
            </el-upload>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductInfoWindow = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--修改商品详情窗口-->
    <el-dialog title="修改商品详情" :visible.sync="updateProductInfoWindow">
      <el-form :model="updateProductInfoParam" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="输入新商品详情名称:">
              <el-input v-model="updateProductInfoParam.pinfoName" placeholder="请输入商品详情名称"> </el-input>
            </el-form-item>
            <el-form-item label="输入新商品详情价格:">
              <el-input v-model="updateProductInfoParam.pinfoPrice" placeholder="请输入商品详情价格"> </el-input>
            </el-form-item>
            <el-form-item label="输入新商品详情库存:">
              <el-input v-model="updateProductInfoParam.restNum" placeholder="请输入商品详情库存"> </el-input>
            </el-form-item>
            <el-form-item label="输入新商品详情描述:">
              <el-input v-model="updateProductInfoParam.pdetails" placeholder="请输入商品详情描述"> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductInfoWindow = false">取 消</el-button>
        <el-button @click="updateProductInfo">修 改</el-button>
      </div>
    </el-dialog>

    <!--商品活动窗口-->
    <el-dialog title="商品活动" :visible.sync="productActiveWindow">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true">
            <el-form-item>
              <el-button type="primary" @click="showAddProductActiveWindow">新增商品活动</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <el-table :data="productActiveList" style="width: 100%">
        <el-table-column prop="pname" label="商品名称" width="180" align="center"></el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="100" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="100" align="center"></el-table-column>
        <el-table-column prop="cutDownPercent" label="活动折扣" width="100" align="center"></el-table-column>
        <el-table-column label="操作" width="300" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="showUpdateProductActiveWindow(scope.row)">编辑</el-button>
            <el-button type="text" @click="deleteProductActive(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!--新增商品活动窗口-->
    <el-dialog title="新增商品活动" :visible.sync="addProductActiveWindow">
      <el-form label-width="150px">
        <el-row :gutter="20" type="flex">
          <el-col :span="12">
            <el-form-item label="请选择商品总览:">
              <el-select v-model="pItemId" placeholder="商品总览" clearable>
                <el-option v-for="item in productItemList" :key="item.pitemId" :label="item.pname"
                  :value="item.pitemId"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="请选择活动持续时间:">
              <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-ddTHH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="请输入活动折扣:">
              <el-input v-model.number="cutDownPercent" placeholder="请输入活动折扣">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addProductActiveWindow = false">取 消</el-button>
        <el-button @click="insertProductActive">新 增</el-button>
      </div>
    </el-dialog>

    <!--修改商品活动窗口-->
    <el-dialog title="修改商品活动" :visible.sync="updateProductActiveWindow">
      <el-form :model="updateProductActiveForm" label-width="150px">
        <el-row :gutter="30" type="flex">
          <el-col :span="12">
            <el-form-item label="请选择活动持续时间:">
              <el-date-picker v-model="newDateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" :picker-options="pickerOptions" format="yyyy-MM-ddTHH:mm:ss">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="请输入活动折扣:">
              <el-input v-model.number="newCutDownPercent" placeholder="请输入活动折扣">
                <template #append>%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateProductActiveWindow = false">取 消</el-button>
        <el-button @click="updateProductActive">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "Product",
    data() {
      return {
        productTypeList: [], //商品种类集合
        productTypeWindow: false, //商品种类窗口
        pTIds: new Set(), //商品种类id集合
        addProductTypeWindow: false, //新增商品种类窗口,
        pTName: "", //新增商品种类名，传单参
        updateProductTypeWindow: false, //修改种类窗口
        updateProductTypeForm: { //修改种类参数对象
          pTId: "", //种类id
          pTName: "", //新种类名
        },
        productBrandList: [], //商品品牌集合
        productBrandWindow: false, //商品品牌窗口
        pBIds: new Set(), //商品品牌id集合
        addProductBrandWindow: false, //新增商品品牌窗口,
        pBName: "", //新增商品品牌名，传单参
        updateProductBrandWindow: false, //修改品牌窗口
        updateProductBrandForm: { //修改品牌参数对象
          pBId: "", //品牌id
          pBName: "", //新品牌名
        },
        findProductItemParam: { //查询总览参数对象
          ptid: "", //商品种类编号
          pbid: "", //商品品牌编号
        },
        productItemList: [], //商品总览集合
        pItemIds: new Set(), //商品总览id集合
        addProductItemWindow: false, //新增商品总览窗口,
        addProductItemParam: { //新增总览参数对象
          pname: "", //新增商品总览名
          ptid: "", //商品种类编号
          pbid: "", //商品品牌编号
        },
        updateProductItemWindow: false, //修改总览窗口
        updateProductItemParam: { //修改总览参数对象
          pitemId: "", //总览id
          pbname: "", //新总览名
        },
        pItemId: "", //总览id，用于查详情
        productInfoList: [], //商品详情集合
        productInfoWindow: false, //商品详情窗口
        pinfoIds: new Set(), //商品详情id集合
        addProductInfoWindow: false, //新增商品详情窗口,
        addProductInfoParam: { //新增详情参数对象
          pInfoName: "", //新增商品商品详细名称
          pitemId: "", //商品种类编号
          pInfoPrice: "", //商品价格
          restNum: "", //库存
          pDetails: "", //商品描述
          pPicture: "", //商品图片
        },
        updateProductInfoWindow: false, //修改详情窗口
        updateProductInfoParam: { //修改详情参数对象
          pinfoId: "", //详情id
          pinfoName: "", //新增商品商品详细名称
          pinfoPrice: "", //商品价格
          restNum: "", //库存
          pdetails: "" //商品描述
        },
        productActiveList: [], //商品活动集合
        productActiveWindow: false, //商品活动窗口
        addProductActiveWindow: false, //新增商品活动窗口,
        activeId: "", //活动编号，传单参
        updateProductActiveWindow: false, //修改活动窗口
        updateProductActiveForm: { //修改活动参数对象
          activeId: "", //活动编号
          startTime: "", //开始时间
          endTime: "", //结束时间
          cutDownPercent: "", //活动折扣
        },
        addProductActiveParam: { //新增活动参数对象
          pitemId: "", //商品编号
          startTime: "", //开始时间
          endTime: "", //结束时间
          cutDownPercent: "", //活动折扣
        },
        dateRange: [], // 用于绑定日期选择器的数组
        newDateRange: [], // 用于修改绑定日期选择器的数组
        cutDownPercent: "", // 用于输入折扣的临时变量
        newCutDownPercent: "", // 用于输入修改折扣的临时变量
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now(); // 禁用现在之前的时间
          }
        },
        headers: {}
      }

    },
    methods: {
      //展开修改活动窗口
      showUpdateProductActiveWindow(row) {
        this.updateProductActiveForm = JSON.parse(JSON.stringify(row))
        this.updateProductActiveWindow = true
      },
      //修改活动信息
      updateProductActive() {
        this.updateProductActiveForm.cutDownPercent = this.newCutDownPercent / 100,
          this.updateProductActiveForm.startTime = this.newDateRange[0],
          this.updateProductActiveForm.endTime = this.newDateRange[1],
          this.$http.post("/product/productActive/updateActive", this.updateProductActiveForm).then(resp => {
            if (resp.data.code == 200) {
              this.loadProductActive();
              this.SuccessTip(resp.data);
              this.updateProductActiveWindow = false;
              // 重置参数对象
              this.updateProductActiveForm = {
                startTime: null,
                endTime: null,
                cutDownPercent: null
              };
              this.newDateRange = []
            } else {
              this.ErrorTip(resp.data)
            }
          })
      },
      //删除商品活动
      deleteProductActive(row) {
        this.activeId = JSON.parse(JSON.stringify(row)).activeId
        this.$http.get("/product/productActive/deleteActive", {
          params: {
            activeId: this.activeId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductActive();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },

      //查询商品总览
      loadProductActive() {
        this.$http.get("/product/productActive/findAllActiveByItemId.c?pItemId=" + "").then(resp => {
          if (resp.data.code == 200) {
            this.productActiveList = resp.data.data
          } else {
            // this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品活动
      insertProductActive() {
         this.addProductActiveParam.pitemId=this.pItemId
        this.addProductActiveParam.cutDownPercent = this.cutDownPercent / 100,
        this.addProductActiveParam.startTime = this.dateRange[0];
        this.addProductActiveParam.endTime = this.dateRange[1];
        console.log(this.addProductActiveParam)
        this.$http.post("/product/productActive/insertActive.api", this.addProductActiveParam).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductActive();
            this.SuccessTip(resp.data);
            this.addProductActiveWindow = false;
            // 重置参数对象
            this.addProductActiveParam = {
              pItemId: null,
              startTime: null,
              endTime: null,
              cutDownPercent: null
            };
            this.dateRange = [];
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品活动窗口
      showAddProductActiveWindow() {
        this.addProductActiveWindow = true
      },
      //展开商品活动窗口
      showProductActiveWindow() {
        this.productActiveWindow = true
      },
      //展开修改详情窗口
      showUpdateProductInfoWindow(row) {
        this.updateProductInfoParam = JSON.parse(JSON.stringify(row))
        this.updateProductInfoWindow = true
      },
      //修改详情信息
      updateProductInfo() {
        this.$http.post("/product/productInfo/updateProductInfo.api", this.updateProductInfoParam).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
            this.updateProductInfoWindow = false;
            this.updateProductInfoParam.pBName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //删除选中商品详情
      deleteProductInfo() {
        this.$http.post("/product/productInfo/deleteProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pinfoIds.clear();
        })
      },
      //删除单个商品详情
      deleteProductInfoById(row) {
        this.pinfoIds.add(JSON.parse(JSON.stringify(row)).pinfoId); //获取id
        this.$http.post("/product/productInfo/deleteProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pinfoIds.clear();
        })
      },
      //解禁选中商品详情
      unlockProductInfo() {
        this.$http.post("/product/productInfo/unlockProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pinfoIds.clear();
        })
      },
      //禁用选中商品详情
      banProductInfo() {
        this.$http.post("/product/productInfo/banProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
            this.pinfoIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //解锁单个商品详情
      unlockProductInfoByid(row) {
        this.pinfoIds.add(JSON.parse(JSON.stringify(row)).pinfoId); //获取id
        this.$http.post("/product/productInfo/unlockProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
            this.pinfoIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //禁用单个商品详情
      banProductInfoById(row) {
        this.pinfoIds.add(JSON.parse(JSON.stringify(row)).pinfoId); //获取id
        this.$http.post("/product/productInfo/banProductInfo", this.pinfoIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductInfo();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pinfoIds.clear();
        })
      },
      //新增商品详情
      insertProductInfo() {
        this.$refs.upload.submit();
      },
      // 新增商品详情成功后的回调
      addProductInfoSuccess(response) {
        if (response.code == "200") {
          this.addProductInfoWindow = false; // 关闭新增商品详情对话框
          this.SuccessTip(response); // 提示新增成功信息
          this.loadProductInfo(); // 刷新页面
          // 清空上传文件列表
          this.$refs.upload.clearFiles();
        } else {
          this.ErrorTip(response); // 提示新增失败信息
        }
      },

      // 新增商品详情失败后的回调
      addProductInfoError(response) {
        this.ErrorTip(response);
      },
      //新增商品详情窗口
      showAddProductInfoWindow() {
        this.addProductInfoParam.pItemId = this.pItemId
        this.addProductInfoWindow = true
      },
      //复选框取商品详情id
      handleProductInfoChange(val) {
        this.pinfoIds.clear();
        val.forEach(item => {
          this.pinfoIds.add(item.pinfoId);
        });
      },
      showProductInfoWindow(row) {
        this.pItemId = JSON.parse(JSON.stringify(row)).pitemId; //获取id
        this.productInfoWindow = true
        this.loadProductInfo();
      },
      //查询商品详情
      loadProductInfo() {
        this.$http.get("/product/productInfo/findAllProductInfo.api", {
          params: {
            pItemId: this.pItemId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.productInfoList = resp.data.data
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },

      //展开修改总览窗口
      showUpdateProductItemWindow(row) {
        this.updateProductItemParam.pitemId = JSON.parse(JSON.stringify(row)).pitemId
        this.updateProductItemWindow = true
      },
      //修改总览信息
      updateProductItem() {
        this.$http.post("/product/productItem/updateProductItem.api", this.updateProductItemParam).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
            this.updateProductItemWindow = false;
            this.updateProductItemParam.pBName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //删除选中商品总览
      deleteProductItem() {
        this.$http.post("/product/productItem/deleteProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pItemIds.clear();
        })
      },
      //删除单个商品总览
      deleteProductItemById(row) {
        this.pItemIds.add(JSON.parse(JSON.stringify(row)).pitemId); //获取id
        this.$http.post("/product/productItem/deleteProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pItemIds.clear();
        })
      },
      //解禁选中商品总览
      unlockProductItem() {
        this.$http.post("/product/productItem/unlockProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pItemIds.clear();
        })
      },
      //禁用选中商品总览
      banProductItem() {
        this.$http.post("/product/productItem/banProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
            this.pItemIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //解锁单个商品总览
      unlockProductItemByid(row) {
        this.pItemIds.add(JSON.parse(JSON.stringify(row)).pitemId); //获取id
        this.$http.post("/product/productItem/unlockProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
            this.pItemIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //禁用单个商品总览
      banProductItemById(row) {
        this.pItemIds.add(JSON.parse(JSON.stringify(row)).pitemId); //获取id
        this.$http.post("/product/productItem/banProductItem.api", this.pItemIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pItemIds.clear();
        })
      },


      //新增商品总览
      insertProductItem() {
        this.$http.post("/product/productItem/insertProductItem.api", this.addProductItemParam).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductItem();
            this.SuccessTip(resp.data);
            this.addProductItemWindow = false
            this.addProductItemParam = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品总览窗口
      showAddProductItemWindow() {
        this.addProductItemWindow = true
      },
      //复选框取商品总览id
      handleProductItemChange(val) {
        this.pItemIds.clear();
        val.forEach(item => {
          this.pItemIds.add(item.pitemId);
        });
      },
      //查询商品总览
      loadProductItem() {
        this.$http.post("/product/productItem/findAllProductItem.c", this.findProductItemParam).then(resp => {
          if (resp.data.code == 200) {
            this.productItemList = resp.data.data
          } else {
            // this.ErrorTip(resp.data)
          }
        })
      },

      //展开修改品牌窗口
      showUpdateProductBrandWindow(row) {
        this.updateProductBrandForm.pBId = JSON.parse(JSON.stringify(row)).pbid
        this.updateProductBrandWindow = true
      },
      //修改品牌信息
      updateProductBrand() {
        this.$http.get("/product/productBrand/updateProductBrand.api", {
          params: {
            pBId: this.updateProductBrandForm.pBId,
            pBName: this.updateProductBrandForm.pBName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
            this.updateProductBrandWindow = false;
            this.updateProductBrandForm.pBName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //删除选中商品品牌
      deleteProductBrand() {
        this.$http.post("/product/productBrand/deleteProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pBIds.clear();
        })
      },
      //删除单个商品品牌
      deleteProductBrandById(row) {
        this.pBIds.add(JSON.parse(JSON.stringify(row)).pbid); //获取id
        this.$http.post("/product/productBrand/deleteProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pBIds.clear();
        })
      },
      //解禁选中商品品牌
      unlockProductBrand() {
        console.log(Array.from(this.pBIds))
        this.$http.post("/product/productBrand/unlockProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pBIds.clear();
        })
      },
      //禁用选中商品品牌
      banProductBrand() {
        console.log(this.pBIds[0])
        this.$http.post("/product/productBrand/banProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
            this.pBIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //解锁单个商品品牌
      unlockProductBrandByid(row) {
        this.pBIds.add(JSON.parse(JSON.stringify(row)).pbid); //获取id
        this.$http.post("/product/productBrand/unlockProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
            this.pBIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //禁用单个商品品牌
      banProductBrandById(row) {
        this.pBIds.add(JSON.parse(JSON.stringify(row)).pbid); //获取id
        this.$http.post("/product/productBrand/banProductBrand.api", this.pBIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pBIds.clear();
        })
      },


      //新增商品品牌
      insertProductBrand() {
        this.$http.get("/product/productBrand/insertProductBrand.api", {
          params: {
            pBName: this.pBName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductBrand();
            this.SuccessTip(resp.data);
            this.addProductBrandWindow = false
            this.pBName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品品牌窗口
      showAddProductBrandWindow() {
        this.addProductBrandWindow = true
      },
      //复选框取商品品牌id
      handleProductBrandChange(val) {
        this.pBIds.clear();
        val.forEach(item => {
          this.pBIds.add(item.pbid);
        });
      },
      //展开商品品牌窗口
      showProductBrandWindow() {
        this.productBrandWindow = true
      },
      //查询商品品牌
      loadProductBrand() {
        this.$http.get("/product/productBrand/findAllProductBrand.api").then(resp => {
          if (resp.data.code == 200) {
            this.productBrandList = resp.data.data
          } else {
            // this.ErrorTip(resp.data)
          }
        })
      },

      //展开修改种类窗口
      showUpdateProductTypeWindow(row) {
        this.updateProductTypeForm.pTId = JSON.parse(JSON.stringify(row)).ptid
        this.updateProductTypeWindow = true
      },
      //修改种类信息
      updateProductType() {
        this.$http.get("/product/productType/updateProductType.api", {
          params: {
            pTId: this.updateProductTypeForm.pTId,
            pTName: this.updateProductTypeForm.pTName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
            this.updateProductTypeWindow = false;
            this.updateProductTypeForm.pTName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //删除选中商品种类
      deleteProductType() {
        this.$http.post("/product/productType/deleteProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pTIds.clear();
        })
      },
      //删除单个商品种类
      deleteProductTypeById(row) {
        this.pTIds.add(JSON.parse(JSON.stringify(row)).ptid); //获取id
        this.$http.post("/product/productType/deleteProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pTIds.clear();
        })
      },
      //解禁选中商品种类
      unlockProductType() {
        console.log(Array.from(this.pTIds))
        this.$http.post("/product/productType/unlockProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pTIds.clear();
        })
      },
      //禁用选中商品种类
      banProductType() {
        console.log(this.pTIds[0])
        this.$http.post("/product/productType/banProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
            this.pTIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //解锁单个商品种类
      unlockProductTypeByid(row) {
        this.pTIds.add(JSON.parse(JSON.stringify(row)).ptid); //获取id
        this.$http.post("/product/productType/unlockProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
            this.pTIds.clear();
          } else {
            this.ErrorTip(resp.data)
          }

        })
      },
      //禁用单个商品种类
      banProductTypeById(row) {
        this.pTIds.add(JSON.parse(JSON.stringify(row)).ptid); //获取id
        this.$http.post("/product/productType/banProductType.api", this.pTIds).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
          this.pTIds.clear();
        })
      },


      //新增商品种类
      insertProductType() {
        this.$http.get("/product/productType/insertProductType.api", {
          params: {
            pTName: this.pTName
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadProductType();
            this.SuccessTip(resp.data);
            this.addProductTypeWindow = false
            this.pTName = ""
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //新增商品种类窗口
      showAddProductTypeWindow() {
        this.addProductTypeWindow = true
      },
      //复选框取商品种类id
      handleProductTypeChange(val) {
        this.pTIds.clear();
        val.forEach(item => {
          this.pTIds.add(item.ptid);
        });
      },
      //展开商品种类窗口
      showProductTypeWindow() {
        this.productTypeWindow = true
      },
      //查询商品种类
      loadProductType() {
        this.$http.get("/product/productType/findAllProductType.api").then(resp => {
          if (resp.data.code == 200) {
            this.productTypeList = resp.data.data
          } else {
            // this.ErrorTip(resp.data)
          }
        })
      },
      //状态展示
      getStateText(state) {
        switch (state) {
          case 0:
            return '正常';
          case 1:
            return '禁用';
          case 2:
            return '删除';
          default:
            return '未知状态';
        }
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
    },
    created() {
      this.loadProductItem();
      this.loadProductBrand();
      this.loadProductType();
      this.loadProductActive();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>


<style scoped>
  .custom-input .el-input__inner {
    border: none;
    background-color: transparent;
    pointer-events: none;
  }
</style>
